<template>
  <div>
    <el-button type="success" @click="TJCollectionForm" icon="el-icon-edit"
      >添加</el-button
    >
    <el-button
      type="danger"
      @click="batchDelete"
      :disabled="!selectedRows.length"
      >批量删除</el-button
    >
    <el-table
      ref="filterTable"
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[
          { text: '2016-05-01', value: '2016-05-01' },
          { text: '2016-05-02', value: '2016-05-02' },
          { text: '2016-05-03', value: '2016-05-03' },
          { text: '2016-05-04', value: '2016-05-04' },
        ]"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: '五菱宏光', value: '五菱宏光' },
          { text: '奥迪A6', value: '奥迪A6' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '五菱宏光' ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :background="true"
    >
    </el-pagination>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="collectionform"
        :rules="rules"
        :model="ruleForm"
        label-width="120px"
        label-position="left"
      >
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="ruleForm.date"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="标签" prop="tag">
          <el-select v-model="ruleForm.tag" placeholder="请选择">
            <el-option label="五菱宏光" value="五菱宏光"></el-option>
            <el-option label="奥迪A6" value="奥迪A6"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="dialogStatus == 'create'"
          @click="submitCollectionForm('collectionform')"
          >添 加</el-button
        >
        <el-button
          type="warning"
          v-else
          @click="submitCollectionForm('collectionform')"
          >修 改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listLoading: true,
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "添加",
      },
      ruleForm: {
        date: new Date(), // 初始化日期为当前日期
        name: "",
        address: "",
        tag: "",
      },
      rules: {
        date: [{ required: true, message: "请选择日期", trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        tag: [{ required: true, message: "请选择标签", trigger: "change" }],
      },
      selectedRows: [], // 存储选中的行
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "五菱宏光",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          tag: "奥迪A6",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "五菱宏光",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "奥迪A6",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.list = this.tableData.slice(
        (this.listQuery.page - 1) * this.listQuery.limit,
        this.listQuery.page * this.listQuery.limit
      );
      this.total = this.tableData.length;
      this.listLoading = false;
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.fetchData();
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    deleteRow(row) {
      this.$confirm("确定要删除这条数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.tableData.findIndex((item) => item === row);
          if (index !== -1) {
            this.tableData.splice(index, 1);
            this.fetchData();
            this.$message.success("删除成功");
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    batchDelete() {
      this.$confirm("确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(
            (item) => !this.selectedRows.some((row) => row === item)
          );
          this.selectedRows = [];
          this.fetchData();
          this.$message.success("批量删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    TJCollectionForm() {
      this.ruleForm = { date: new Date(), name: "", address: "", tag: "" };
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    submitCollectionForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const newDate = this.ruleForm.date;
          const newItem = {
            ...this.ruleForm,
            date: newDate.toISOString().slice(0, 10), // 格式化日期为 yyyy-MM-dd
          };
          if (this.dialogStatus === "create") {
            this.tableData.push(newItem);
          } else if (this.dialogStatus === "update") {
            const index = this.tableData.findIndex(
              (item) => item.date === newDate.toISOString().slice(0, 10)
            );
            if (index !== -1) {
              this.tableData.splice(index, 1, newItem);
            }
          }
          this.fetchData();
          this.dialogFormVisible = false;
          this.$message.success("操作成功");
        }
      });
    },
  },
};
</script>
<style>
/* 你的样式 */
</style>